﻿@using TamoCRM.Core
@using TamoCRM.Core.Commons.Utilities
@using TamoCRM.Services.UserRole

@model TamoCRM.Web.Mvc.Areas.Admin.Models.Contacts.ContactCreateModel

@{
    ViewBag.Title = "Lịch làm việc";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}

@{
    var lstLevels = ViewBag.Levels;
}

<div class="breadcrumbs" id="breadcrumbs">
    <script type="text/javascript">
        try {
            ace.settings.check('breadcrumbs', 'fixed');
        }
        catch (e) {

        }
    </script>

    <ul class="breadcrumb">
        <li>
            <i class="icon-home home-icon"></i>
            <a href="/Home">Trang chủ</a>
        </li>

        <li>
            <a href="javascript:void(0);">Danh mục</a>
        </li>
        <li class="active">Contact</li>
    </ul>
</div>

<div class="page-content">
    <div class="page-header">
        <h1>Lịch làm việc</h1>
    </div>
    <!-- /.page-header -->

    <div class="row">
        <div class="col-xs-12">
            <!-- PAGE CONTENT BEGINS -->
            @using (Ajax.BeginForm("FilterContactToday", "Contact", new AjaxOptions { HttpMethod = "POST" }, new { enctype = "multipart/form-data", @class = "form-horizontal", role = "form", id = "filter_contact_today_form" }))
            {
                @Html.AntiForgeryToken()
                <div class="form-group">
                    <div class="col-sm-12" id="alert">
                    </div>
                </div>
                <div class="row" style="text-align: center; margin: 0 20px 0 20px;">
                    <table style="width: 100%;border: 1px solid #eee; border-collapse:collapse;" border="1">
                        <tr style="height: 35px;">
                            <td rowspan="4" style="text-align: center;width: 20%;font-weight: bold;">Khối lượng công việc</td>
                            <td rowspan="2" style="text-align: center;width: 16%;font-weight: bold;">Số lượng phải gọi</td>
                            <td colspan="2" style="text-align: center;width: 16%;font-weight: bold;">Số lượng đã gọi</td>
                            <td rowspan="2" style="text-align: center;width: 16%;font-weight: bold;">Số lượng chưa gọi</td>
                            <td rowspan="2" style="text-align: center;width: 16%;font-weight: bold;">Số lượng tồn trước đó</td>
                        </tr>
                        <tr style="height: 30px;">
                            <td style="text-align: center;font-weight: bold;color: darkslategrey;">Trong lịch</td>
                            <td style="text-align: center;font-weight: bold;color: darkslategrey;">Ngoài lịch</td>
                        </tr>
                        <tr>
                            <td style="text-align: center;width: 16%;">(1)</td>
                            <td style="text-align: center;width: 16%;">(2)</td>
                            <td style="text-align: center;width: 16%;">(3)</td>
                            <td style="text-align: center;width: 16%;">(4) = (1) - (2)</td>
                            <td style="text-align: center;width: 16%;">(5)</td>
                        </tr>
                        <tr>
                            <td style="text-align: center;font-weight: bold;color: darkslategrey;"><h3>@ViewBag.HandoverCount</h3></td>
                            <td style="text-align: center;font-weight: bold;color: darkslategrey;"><h3>@(ConvertHelper.ToInt32(ViewBag.HandoverCount) - ConvertHelper.ToInt32(ViewBag.NotCompleteCount))</h3></td>
                            <td style="text-align: center;font-weight: bold;color: darkslategrey;"><h3>@ViewBag.CompleteOutCount</h3></td>
                            <td style="text-align: center;font-weight: bold;color: darkslategrey;"><h3><a id="aNotComplete" style="cursor: pointer;">@ViewBag.NotCompleteCount</a></h3></td>
                            <td style="text-align: center;font-weight: bold;color: darkslategrey;"><h3><a id="aExists" style="cursor: pointer;">@ViewBag.TotalExists</a></h3></td>
                        </tr>
                    </table>
                </div>
                <hr />
                <div class="row">
                    <div class="col-sm-3" style="font-weight: bold;">
                        Ngày hẹn
                    </div>
                    <div class="col-sm-9" style="font-weight: bold;">
                        Điều kiện lọc
                    </div>
                </div>
                <div class="space-4"></div>
                <div class="row">
                    <div class="col-sm-3">
                        <div class="form-group">
                            <div class="col-sm-4">Từ ngày</div>
                            <div class="col-sm-6">
                                <input id="FromDate" name="FromDate" type="text" value="@DateTime.Now.ToString("dd/MM/yyyy")">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-4">Đến ngày</div>
                            <div class="col-sm-6">
                                <input id="ToDate" name="ToDate" type="text" value="@DateTime.Now.ToString("dd/MM/yyyy")">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div style="border: 1px solid #c5d0dc; padding: 6px 0 6px 20px;">
                            <div class="form-group" style="margin-bottom: 5px;">
                                <div class="col-sm-2">
                                    <input type="radio" id="rdbAll" name="pkfrom" checked />
                                    <label for="rdbAll">Tất cả</label>
                                </div>
                                <div class="col-sm-2">
                                    <input type="radio" id="rdbNew" name="pkfrom" />
                                    <label for="rdbNew">Mới</label>
                                </div>
                                <div class="col-sm-2">
                                    <input type="radio" id="rdbAppointment" name="pkfrom" />
                                    <label for="rdbAppointment">Có hẹn</label>
                                </div>
                            </div>
                            <div id="divLevels" class="form-group" style="margin-bottom: 0px; display: none;">
                                @foreach (var item in lstLevels)
                                {
                                    <div class="col-sm-1">
                                        <input type="checkbox" name='@(item.LevelId)_chkLevel' id='@(item.LevelId)_chkLevel' />
                                        <label for="@(item.LevelId)_chkLevel">@item.Name</label>
                                    </div>
                                }
                            </div>
                        </div>
                    </div>
                </div>
            }

            <div class="space-6"></div>
            <button id="btnGoFilter" class="btn-primary" style="float: right;">Lọc Contact</button>
            <div class="clearfix"></div>

            <div class="space-6"></div>
            <table id="grid-table"></table>
            <div id="grid-pager"></div>

            <!-- PAGE CONTENT ENDS -->
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</div>

<script type="text/javascript">
    var url = 'admin/api/contact/filtertoday?user={0}&from={1}&to={2}&type={3}&levels={4}&branchId={5}';
    var grid_selector = "#grid-table";
    var heades = ['Id', 'Họ và tên', 'Level', 'Email', 'Ngày', 'Sáng/Chiều', 'Giờ', 'Nội dung cuộc gọi gần nhất', 'Trạng thái chăm sóc', 'Tổng số cuộc gọi', 'Chức năng'];
    var model = [
        { name: 'Id', index: 'Id', editable: false, sorttype: 'string', editoptions: { disabled: true }, width: '0px' },
        { name: 'Fullname', index: 'Fullname', editable: false, width: '90px', sorttype: 'string' },
        { name: 'LevelId', index: 'LevelId', editable: false, width: '40px', sorttype: 'string', align: 'center', formatter: levelFomatter },
        { name: 'Email', index: 'Email', editable: false, width: '70px', sorttype: 'string', align: 'center' },
        { name: 'AppointmentDate', index: 'AppointmentDate', editable: false, width: '60px', align: 'center', formatter: 'date', formatoptions: { srcformat : 'Y-m-dTH:i:s', newformat : 'd/m/Y' } },
        { name: 'AppointmentAmPm', index: 'AppointmentDate', editable: false, width: '70px', align: 'center', formatter: stringFormatter },
        { name: 'AppointmentTime', index: 'AppointmentDate', editable: false, width: '40px', align: 'center', formatter: 'date', formatoptions: { srcformat : 'Y-m-dTH:i:s', newformat : 'H:i' } },
        { name: 'CallInfo', index: 'CallInfo', editable: false, width: '270px', sorttype: 'string', align: 'left' },
        { name: 'StatusCareId', index: 'StatusCareId', editable: false, width: '120px', formatter: statusCareFomatter },
        { name: 'CallAmount', index: 'CallAmount', editable: false, width: '60px', align: 'center' },
        { name: 'Function', index: 'Function', editable: false, width: '55px', align: 'center', formatter: "dynamicLink",
            formatoptions: {
                cellValue: function (cellValue, rowId, rowData, options) {
                    var groupType = '@ViewBag.GroupType';
                    if (groupType == '@((int)GroupType.ManagerTVTS)') {
                        return '<div style="color:#810c15;margin:5px; float:left;"><a style="cursor: pointer;" onclick="return openDialog(' + rowData.Id + ')"><img style="width:16px; height:16px;" src="../../../../Images/edit-16.png"/></a></div>' +
                            '<div style="color:#810c15;margin:5px; float:left;"><a href="" onclick="return deleteClick(' + rowData.Id + ');">   <img style="width:16px; height:16px;" src="../../../../Images/delete-16.png"/></a></div>' +
                            '<div style="clear: both;"></div>';
                    } else {
                        return '<div style="color:#810c15;margin:5px;"><a style="cursor: pointer;" onclick="return openDialog(' + rowData.Id + ')"><img style="width:16px; height:16px;" src="../../../../Images/edit-16.png"/></a></div>';
                    }
                }
            }
        }
    ];
    
    function deleteClick(id) {
        var r = confirm("Có phải bạn muốn xóa contact này?");
        if (r == true)
        {
            var newUrl = "/admin/api/contact/delete/{0}".format(id);
            $.ajax({
                type: 'GET',
                url: newUrl,
                success: function (data) {
                    jQuery(grid_selector).jqGrid().trigger("reloadGrid");
                },
                error: function (request, status, ex) {
                    alertError("Xóa contact không thành công.");
                }
            });
        }
        return false;
    }
    $(document).ready(function () {
        $("#ToDate").datepicker({ format: 'dd/mm/yyyy', autoclose: true });
        $("#FromDate").datepicker({ format: 'dd/mm/yyyy', autoclose: true });

        var userId = '@ViewBag.UserId';
        var branchId = '@ViewBag.BranchId';

        setupGridWithHeight("#grid-table", 
            "#grid-pager", 
            url.format(@UserRepository.GetCurrentUserInfo().UserID, '', '', @((int)TodayType.NewAndAppointment), '', branchId), 
            "admin/api/contact/edit", 
            "Id", 
            "Danh sách Contact", 
            heades, 
            model, 
            'GET', 
            '100%');
        $(grid_selector).jqGrid("setGroupHeaders", {
            useColSpanStyle: true,
            groupHeaders: [
                { startColumnName: "Fullname", numberOfColumns: 3, titleText: '<table style="width:100%;border-spacing:0px;"><tr><td style="text-align:center;height:40px;"><b>Thông tin Contact</b></td></tr></table>' },
                { startColumnName: "AppointmentDate", numberOfColumns: 3, titleText: '<table style="width:100%;border-spacing:0px;"><tr><td style="text-align:center;"><b>Thông tin lịch hẹn gọi lại</b></td></tr></table>' },
                { startColumnName: "CallInfo", numberOfColumns: 2, titleText: '<table style="width:100%;border-spacing:0px;"><tr><td style="text-align:center;"><b>Tình trạng chăm sóc</b></td></tr></table>' }
            ]
        });
        $("#btnGoFilter").click(function (e) {
            e.preventDefault();

            // Param
            var fromDate = $('#FromDate').val() === undefined ? '' : $('#FromDate').val().replaceAll('/', '');
            var toDate = $('#ToDate').val() === undefined ? '' : $('#ToDate').val().replaceAll('/', '');
            var todayType = $('#rdbAll').is(':checked') ? '@((int)TodayType.All)' : $('#rdbNew').is(':checked') ? '@((int)TodayType.New)' : '@((int)TodayType.Appointment)';
            var levels = todayType == '@((int)TodayType.Appointment)' ? buildParamLevels() : '';

            // Format Url
            var newUrl = '/' + url.format(userId, fromDate, toDate, todayType, levels, branchId);
            jQuery(grid_selector).jqGrid().setGridParam({ url: newUrl }).trigger("reloadGrid");
        });
        $('#aExists').click(function(e) {
            $('#rdbAll').click();
            
            var fromDate = '@DateTime.Now.AddMonths(-1).AddDays(-1).ToString("dd/MM/yyyy")';
            $('#FromDate').val(fromDate);
            
            var toDate = '@DateTime.Now.Date.AddSeconds(-1).ToString("dd/MM/yyyy")';
            $('#ToDate').val(toDate);
            
            // Format Url
            var newUrl = '/admin/api/contact/FilterTodayOneMonth?user={0}&branchId={1}'.format(userId, branchId);
            jQuery(grid_selector).jqGrid().setGridParam({ url: newUrl }).trigger("reloadGrid");
        });
        $('#aNotComplete').click(function(e) {
            // Param
            var levels = '';
            var date = '@DateTime.Now.ToString("dd/MM/yyyy")';
            var todayType = '@((int)TodayType.NewAndAppointment)';
            
            $('#rdbAll').click();
            $('#ToDate').val(date);
            $('#FromDate').val(date);
            
            // Param
            var toDate = date.replaceAll('/', '');
            var fromDate = date.replaceAll('/', '');

            // Format Url
            var newUrl = '/' + url.format(userId, fromDate, toDate, todayType, levels, branchId);
            jQuery(grid_selector).jqGrid().setGridParam({ url: newUrl }).trigger("reloadGrid");
        });
        $("#rdbNew").click(function (e) {
            $('#divLevels').css('display', 'none');
        });
        $("#rdbAll").click(function (e) {
            $('#divLevels').css('display', 'none');
        });
        $("#rdbAppointment").click(function (e) {
            $('#divLevels').css('display', '');
        });
    });
</script>
